<template>
  <div class="post">
    <div class="post-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="form" :rules="rules">
        <el-form-item label="" prop="comName">
          <el-input v-model="formInline.comName" placeholder="小区名称"></el-input>
        </el-form-item>
        <el-form-item label="" prop="uname">
          <el-input v-model="formInline.uname" placeholder="小区单位"></el-input>
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker type="date" placeholder="建设时间" v-model="formInline.time"></el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="region">
          <el-select v-model="formInline.region" placeholder="选择状态">
            <el-option label="已建设" value="1"></el-option>
            <el-option label="未建设" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
          <el-button type="success" class="el-icon-plus" @click="onSubmit(1)">录入</el-button>
          <el-button type="primary" @click="onSubmit(2)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post-main">
      <div class="main-con">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="communityname" label="小区名称">
          </el-table-column>
          <el-table-column prop="unitname" label="单元名称" width="180">
          </el-table-column>
          <el-table-column prop="unitnum" label="栋数" width="400">
          </el-table-column>
          <el-table-column prop="createtime" label="建设时间">
            <!-- 插槽 -->
            <template slot-scope="scope">
              {{ scope.row.createtime.substring(0, 10) }} {{ Number(scope.row.createtime.substring(11, 13)) + 8 }}
              {{ scope.row.createtime.substring(13, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="unitstatus" label="状态">
            <!-- 插槽 -->
            <template slot-scope="scope">
              <div v-if="scope.row.unitstatus == 1">已建设</div>
              <div v-else>未建设</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <!-- 
                  scope.row:当前行信息
                  scope.#index:当前点击的下标
                  -->
              <el-button size="mini" type="success" @click="handleView(scope.row)">详情</el-button>
              <el-button size="mini" type="danger" @click="handleDel(scope.row, scope.$index)">归档</el-button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="iPagination.currentPage" :page-sizes="iPagination.pageSizes" :page-size="iPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="iPagination.total">
        </el-pagination>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="mtk">
      <el-dialog title="公告详情" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm">
          <el-form-item label="小区名称：">
            <el-input v-model="ruleForm.communityname" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布时间：">
            <el-input v-model="time" disabled>

            </el-input>

          </el-form-item>

          <el-form-item label="单元名称：">
            <el-input v-model="ruleForm.unitname" disabled></el-input>
          </el-form-item>
          <el-form-item label="栋数：">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.unitnum" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="公告状态：" disabled>
            <el-input value="阅读量" disabled></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ids: "",
      iPagination: {
        // 默认选中哪一页
        currentPage: 1,
        // 定义每列有多少条列表
        pageSizes: [5, 10, 20, 50, 100],
        // 默认定义每页多少条
        pageSize: 10,
        // 定义总条数
        total: null,
        // // 页码
        // page:1,
        // // 每页多少条
        // rows:10,
      },
      formInline: {
        comName: '',
        time: '',
        uname: '',
        region: "",
      },
      tableData: [],
      ruleForm: {
        communityname: "",
        unitnum: "",
        unitname: "",
        createtime: "",
        region: "",
      },
      rules: {
        comName: [
          // required 必填 message：消息提示 trigger：失去焦点的时候触发
          { required: true, message: '请输入发布小区', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请输入单元名称', trigger: 'blur' },
        ],
        uname: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],

      },
      // m默认隐藏
      dialogFormVisible: false,
      time: ""
    }
  },
  methods: {
    // 渲染数据
    handleServe() {
      this.$Axios({
        url: '/house/gethouseList',
        method: 'get',
        data: {
          pageNum: this.iPagination.pageSize,
          currPage: this.iPagination.currentPage - 1,
        },
        success: (result) => {
          this.tableData = result.data
          this.iPagination.total = result.total;
        }
      })
    },
    // 查询
    search() {
      const now = this.formInline.time;
      const isoString = now.toISOString();
      console.log(isoString); // 输出类似于 "2024-05-23T12:45:30.000Z" 的字符串
      const nowTime = new Date(isoString)
      nowTime.setHours(nowTime.getHours() + 8);
      this.$axiosToken({
        url: '/house/searchList',
        method: 'get',
        data: {
          communityname: this.formInline.comName,
          unitname: this.formInline.uname,
          time: this.formInline.time,
          createDt: nowTime.toISOString().substring(0, 10),
          value: this.formInline.region,
          currPage: this.iPagination.currentPage,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          this.total = result.total
          setTimeout(() => {
            this.loading = false;
          }, 100)
        }
      })
    },
    // 录入，重置
    onSubmit(val) {
      // 新增
      if (val == 1) {
        this.$router.push({
          name: "add",
          query: {
            type: "ADD",
          }
        })
      } else {
        this.formInline = {}
      }
    },
    // 删除
    handleDel(row, index) {
      // console.log(row);
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // const p_id = row.id;
        this.$axiosToken({
          url: '/house/delunitList',
          method: 'get',
          data: { id: row.id },
          success: (result) => {
            this.handleServe()
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'warning'
            })
          }
        })
      })
    },
    // 查看公告
    handleView(row) {
      // 跳转详情
      // this.ids=row.id
      this.$router.push({
        name: "add",
        query: {
          type: "DETAIL",
          id: row.id
        }
      })

      // 打开模态框
      // this.dialogFormVisible = true
      // console.log(row);
      // this.ruleForm = Object.assign(row)
      // this.time = this.ruleForm.createtime.substring(0, 10)
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.iPagination.pageSize = val
      this.handleServe()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.iPagination.currentPage = val
      this.handleServe()
    }
  },
  mounted() {
    this.handleServe()
  }
}
</script>
<style lang="scss" scoped>
.post::v-deep {
  .el-form {
    display: flex;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;
      width: 18%;

      &:nth-child(5) {
        width: 24%;
        text-align: right;
        margin-right: 0;
      }

      .el-form-item__content {
        width: 100%;

        .el-input {
          width: 100%;
        }

        .el-select {
          width: 100%;
        }

        input {
          height: 36px;
          font-size: 14px;
        }

        button {
          &:first-child {
            width: 12%;
            margin-left: 30px;
          }

          width: 34%;
          font-size: 14px;
        }
      }
    }
  }

  .post-main {

    // border: 1px solid #ccc;
    // padding: 10px;
    // margin-top: 10px;
    .main-con {
      margin-top: 20px;

      .el-table {

        th,
        td {
          font-size: 14px;
          text-align: center;
        }


        .has-gutter {
          tr {
            background: #eef1f6;
          }

          .el-table__cell {
            background: #eef1f6;
            border-right: 1px solid #c2c2c28a;
            font-size: 14px;
            font-weight: 600;
            color: #000000c0;
          }
        }
      }
    }

    .el-pagination {
      text-align: right;
    }
  }

  .mtk {
    .el-form {
      .el-form-item {
        display: inline-block;
        margin-bottom: 0;
        // width: 46%;

        .el-input {
          width: unset;
        }

        &:first-child {
          width: 46%;
          margin-right: 20px;

          .el-input {
            width: 78%;
          }
        }

        &:nth-child(2) {
          width: 46%;

          .el-input {
            width: 78%;
          }
        }

        &:nth-child(3) {
          // width: 30%;
          display: block;

          .el-input {
            width: 100%;
          }
        }

        &:nth-child(4) {
          // width: 30%;
          display: block;

          .el-input {
            width: 100%;
          }
        }


        .el-form-item__label {
          padding: unset;
        }

        .el-form-item__content {
          width: 100%;

          // display: inline-block;
          input {
            height: 36px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
